<%--
  Created by IntelliJ IDEA.
  User: 付志玲
  Date: 2025/6/3
  Time: 下午5:20
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

    <!-- 自定义Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0A2463',
                        accent: '#3E92CC',
                        neutral: '#F5F7FA',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
        }
    </style>

    <style>
        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-30">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <button id="sidebar-toggle" class="lg:hidden p-2 rounded-md hover:bg-gray-100 transition-colors">
                <i class="fa fa-bars text-gray-600"></i>
            </button>
            <div class="flex items-center space-x-2">
                <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary hidden sm:block">学生管理系统</h1>
            </div>
        </div>

        <div class="flex items-center space-x-4">
<%--            <div class="relative hidden md:block">--%>
<%--                <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/30 w-64 transition-all">--%>
<%--                <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>--%>
<%--            </div>--%>

            <div class="relative">
                <button class="p-2 rounded-full hover:bg-gray-100 transition-colors relative">
                    <i class="fa fa-bell-o text-gray-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
                </button>
            </div>

            <div class="flex items-center space-x-2 cursor-pointer group">
                <img src="image/first.png" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20 group-hover:border-primary transition-all">
                <span class="hidden sm:block font-medium">管理员</span>
                <i class="fa fa-angle-down text-gray-500 group-hover:text-primary transition-colors"></i>
            </div>
        </div>
    </div>
</header>

<div class="flex pt-16 min-h-screen">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="bg-white shadow-md fixed left-0 top-16 bottom-0 w-64 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-20 overflow-y-auto">
        <nav class="py-4">
            <div class="px-4 py-3 mb-4">
                <div class="flex items-center space-x-3">
                    <div class="bg-primary/10 p-2 rounded-full">
                        <i class="fa fa-user-circle-o text-primary text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold">管理员</h3>
                        <p class="text-xs text-gray-500">系统管理员</p>
                    </div>
                </div>
            </div>

            <ul class="space-y-1">
                <li>
                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 sidebar-item-active">
                        <i class="fa fa-home w-6 text-center"></i>
                        <span class="ml-3">首页</span>
                    </a>
                </li>

                <li class="border-t border-gray-100 my-2 pt-2">
                    <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">
                        系统管理
                    </div>
                </li>

                <li>
                    <a href="student_info.jsp" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-id-card-o w-6 text-center"></i>
                        <span class="ml-3">学生信息</span>
                    </a>
                </li>

                <li>
                    <a href="course_management.jsp" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-graduation-cap w-6 text-center"></i>
                        <span class="ml-3">课程信息</span>
                    </a>
                </li>

                <li>
                    <a href="course_selection.jsp" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-book w-6 text-center"></i>
                        <span class="ml-3">学生选课与成绩</span>
                    </a>
                </li>

                <li>
                    <a href="student_management.jsp" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-users w-6 text-center"></i>
                        <span class="ml-3">学籍管理</span>
                    </a>
                </li>







<%--                <li class="border-t border-gray-100 my-2 pt-2">--%>
<%--                    <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">--%>
<%--                        统计分析--%>
<%--                    </div>--%>
<%--                </li>--%>

<%--                <li>--%>
<%--                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">--%>
<%--                        <i class="fa fa-bar-chart w-6 text-center"></i>--%>
<%--                        <span class="ml-3">成绩统计</span>--%>
<%--                    </a>--%>
<%--                </li>--%>

<%--                <li>--%>
<%--                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">--%>
<%--                        <i class="fa fa-pie-chart w-6 text-center"></i>--%>
<%--                        <span class="ml-3">选课分析</span>--%>
<%--                    </a>--%>
<%--                </li>--%>

<%--                <li class="border-t border-gray-100 my-2 pt-2">--%>
<%--                    <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider">--%>
<%--                        系统设置--%>
<%--                    </div>--%>
<%--                </li>--%>

<%--                <li>--%>
<%--                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">--%>
<%--                        <i class="fa fa-cog w-6 text-center"></i>--%>
<%--                        <span class="ml-3">系统配置</span>--%>
<%--                    </a>--%>
<%--                </li>--%>

<%--                <li>--%>
<%--                    <a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 transition-colors">--%>
<%--                        <i class="fa fa-user-o w-6 text-center"></i>--%>
<%--                        <span class="ml-3">用户管理</span>--%>
<%--                    </a>--%>
<%--                </li>--%>
<%--            </ul>--%>

<%--            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-100">--%>
<%--                <a href="#" class="flex items-center px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">--%>
<%--                    <i class="fa fa-sign-out w-6 text-center"></i>--%>
<%--                    <span class="ml-3">退出登录</span>--%>
<%--                </a>--%>
<%--            </div>--%>
        </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="flex-1 lg:ml-64 p-4 sm:p-6">
        <div class="fade-in">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">欢迎使用学生管理系统</h2>
                <p class="text-gray-500 mt-1">今天是 <span id="current-date"></span></p>
            </div>

            <!-- 统计卡片 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">总学生数</p>
                            <h3 class="text-2xl font-bold mt-1">1,245</h3>
                            <p class="text-success text-xs mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 8.2%
                            </p>
                        </div>
                        <div class="bg-blue-100 p-3 rounded-lg">
                            <i class="fa fa-users text-primary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-gray-500 text-sm">总课程数</p>
                            <h3 class="text-2xl font-bold mt-1">86</h3>
                            <p class="text-success text-xs mt-2 flex items-center">
                                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 4.5%
                            </p>
                        </div>
                        <div class="bg-green-100 p-3 rounded-lg">
                            <i class="fa fa-book text-green-600 text-xl"></i>
                        </div>
                    </div>
                </div>

<%--                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">--%>
<%--                    <div class="flex items-center justify-between">--%>
<%--                        <div>--%>
<%--                            <p class="text-gray-500 text-sm">平均成绩</p>--%>
<%--                            <h3 class="text-2xl font-bold mt-1">82.5</h3>--%>
<%--                            <p class="text-warning text-xs mt-2 flex items-center">--%>
<%--                                <i class="fa fa-arrow-down mr-1"></i> 较上月下降 1.3%--%>
<%--                            </p>--%>
<%--                        </div>--%>
<%--                        <div class="bg-orange-100 p-3 rounded-lg">--%>
<%--                            <i class="fa fa-line-chart text-orange-500 text-xl"></i>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>

<%--                <div class="bg-white rounded-xl shadow-sm p-5 card-hover">--%>
<%--                    <div class="flex items-center justify-between">--%>
<%--                        <div>--%>
<%--                            <p class="text-gray-500 text-sm">教师总数</p>--%>
<%--                            <h3 class="text-2xl font-bold mt-1">42</h3>--%>
<%--                            <p class="text-success text-xs mt-2 flex items-center">--%>
<%--                                <i class="fa fa-arrow-up mr-1"></i> 较上月增长 2.3%--%>
<%--                            </p>--%>
<%--                        </div>--%>
<%--                        <div class="bg-purple-100 p-3 rounded-lg">--%>
<%--                            <i class="fa fa-user-circle-o text-purple-600 text-xl"></i>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>

            <!-- 图表和最近操作 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <div class="bg-white rounded-xl shadow-sm p-5 lg:col-span-2">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-lg">课程选修情况</h3>
<%--                        <div class="flex space-x-2">--%>
<%--                            <button class="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full hover:bg-primary/20 transition-colors">--%>
<%--                                本学期--%>
<%--                            </button>--%>
<%--                            <button class="px-3 py-1 text-xs bg-gray-100 text-gray-500 rounded-full hover:bg-gray-200 transition-colors">--%>
<%--                                上学期--%>
<%--                            </button>--%>
<%--                        </div>--%>
                    </div>
                    <div class="h-64">
                        <canvas id="courseChart"></canvas>
                    </div>
                </div>

<%--                <div class="bg-white rounded-xl shadow-sm p-5">--%>
<%--                    <div class="flex items-center justify-between mb-4">--%>
<%--                        <h3 class="font-semibold text-lg">最近操作</h3>--%>
<%--                        <a href="#" class="text-primary text-sm hover:underline">查看全部</a>--%>
<%--                    </div>--%>
<%--                    <div class="space-y-4">--%>
<%--                        <div class="flex items-start space-x-3">--%>
<%--                            <div class="bg-blue-100 p-2 rounded-full">--%>
<%--                                <i class="fa fa-plus text-primary"></i>--%>
<%--                            </div>--%>
<%--                            <div>--%>
<%--                                <p class="text-sm font-medium">新增了课程 "数据结构与算法"</p>--%>
<%--                                <p class="text-xs text-gray-500 mt-1">2分钟前</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>

<%--                        <div class="flex items-start space-x-3">--%>
<%--                            <div class="bg-green-100 p-2 rounded-full">--%>
<%--                                <i class="fa fa-check text-green-600"></i>--%>
<%--                            </div>--%>
<%--                            <div>--%>
<%--                                <p class="text-sm font-medium">完成了 2023 级学生成绩录入</p>--%>
<%--                                <p class="text-xs text-gray-500 mt-1">15分钟前</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>

<%--                        <div class="flex items-start space-x-3">--%>
<%--                            <div class="bg-orange-100 p-2 rounded-full">--%>
<%--                                <i class="fa fa-pencil text-orange-500"></i>--%>
<%--                            </div>--%>
<%--                            <div>--%>
<%--                                <p class="text-sm font-medium">修改了学生 "张三" 的个人信息</p>--%>
<%--                                <p class="text-xs text-gray-500 mt-1">1小时前</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>

<%--                        <div class="flex items-start space-x-3">--%>
<%--                            <div class="bg-red-100 p-2 rounded-full">--%>
<%--                                <i class="fa fa-trash text-red-500"></i>--%>
<%--                            </div>--%>
<%--                            <div>--%>
<%--                                <p class="text-sm font-medium">删除了已结课的 "计算机基础"</p>--%>
<%--                                <p class="text-xs text-gray-500 mt-1">3小时前</p>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>

            <!-- 功能快速入口 -->
            <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <h3 class="font-semibold text-lg mb-4">功能快速入口</h3>
                <div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-6 gap-4">
                    <a href="student_management.jsp" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="bg-blue-100 p-3 rounded-full mb-2">
                            <i class="fa fa-users text-primary text-xl"></i>
                        </div>
                        <span class="text-sm text-center">学籍管理</span>
                    </a>

                    <a href="course_selection.jsp" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="bg-green-100 p-3 rounded-full mb-2">
                            <i class="fa fa-book text-green-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-center">学生选课与成绩</span>
                    </a>

                    <a href="course_management.jsp" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="bg-orange-100 p-3 rounded-full mb-2">
                            <i class="fa fa-graduation-cap text-orange-500 text-xl"></i>
                        </div>
                        <span class="text-sm text-center">管理课程信息</span>
                    </a>

                    <a href="student_info.jsp" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">
                        <div class="bg-purple-100 p-3 rounded-full mb-2">
                            <i class="fa fa-id-card-o text-purple-600 text-xl"></i>
                        </div>
                        <span class="text-sm text-center">管理学生信息</span>
                    </a>

<%--                    <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">--%>
<%--                        <div class="bg-red-100 p-3 rounded-full mb-2">--%>
<%--                            <i class="fa fa-bar-chart text-red-500 text-xl"></i>--%>
<%--                        </div>--%>
<%--                        <span class="text-sm text-center">成绩统计</span>--%>
<%--                    </a>--%>

<%--                    <a href="#" class="flex flex-col items-center p-4 rounded-lg hover:bg-gray-50 transition-colors">--%>
<%--                        <div class="bg-gray-100 p-3 rounded-full mb-2">--%>
<%--                            <i class="fa fa-cog text-gray-600 text-xl"></i>--%>
<%--                        </div>--%>
<%--                        <span class="text-sm text-center">系统设置</span>--%>
<%--                    </a>--%>
                </div>
            </div>

            <!-- 最近更新的学生 -->
            <div class="bg-white rounded-xl shadow-sm p-5">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-lg">最近更新的学生</h3>
                    <a href="student_info.jsp" class="text-primary text-sm hover:underline">查看全部</a>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full">
                        <thead>
                        <tr class="border-b border-gray-200">
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学号</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">专业</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">年级</th>
                            <th class="py-3 px-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最近更新</th>
<%--                            <th class="py-3 px-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>--%>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm">2023001</td>
                            <td class="py-3 px-4 text-sm">张三</td>
                            <td class="py-3 px-4 text-sm">计算机科学与技术</td>
                            <td class="py-3 px-4 text-sm">2023级</td>
                            <td class="py-3 px-4 text-sm text-gray-500">2023-06-01</td>
<%--                            <td class="py-3 px-4 text-right">--%>
<%--                                <a href="#" class="text-primary text-sm hover:underline">查看</a>--%>
<%--                            </td>--%>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm">2023002</td>
                            <td class="py-3 px-4 text-sm">李四</td>
                            <td class="py-3 px-4 text-sm">软件工程</td>
                            <td class="py-3 px-4 text-sm">2023级</td>
                            <td class="py-3 px-4 text-sm text-gray-500">2023-06-01</td>
<%--                            <td class="py-3 px-4 text-right">--%>
<%--                                <a href="#" class="text-primary text-sm hover:underline">查看</a>--%>
<%--                            </td>--%>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm">2022056</td>
                            <td class="py-3 px-4 text-sm">王五</td>
                            <td class="py-3 px-4 text-sm">数据科学与大数据技术</td>
                            <td class="py-3 px-4 text-sm">2022级</td>
                            <td class="py-3 px-4 text-sm text-gray-500">2023-05-31</td>
<%--                            <td class="py-3 px-4 text-right">--%>
<%--                                <a href="#" class="text-primary text-sm hover:underline">查看</a>--%>
<%--                            </td>--%>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm">2022057</td>
                            <td class="py-3 px-4 text-sm">赵六</td>
                            <td class="py-3 px-4 text-sm">人工智能</td>
                            <td class="py-3 px-4 text-sm">2022级</td>
                            <td class="py-3 px-4 text-sm text-gray-500">2023-05-30</td>
<%--                            <td class="py-3 px-4 text-right">--%>
<%--                                <a href="#" class="text-primary text-sm hover:underline">查看</a>--%>
<%--                            </td>--%>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-4 text-sm">2021108</td>
                            <td class="py-3 px-4 text-sm">孙七</td>
                            <td class="py-3 px-4 text-sm">网络工程</td>
                            <td class="py-3 px-4 text-sm">2021级</td>
                            <td class="py-3 px-4 text-sm text-gray-500">2023-05-29</td>
<%--                            <td class="py-3 px-4 text-right">--%>
<%--                                <a href="#" class="text-primary text-sm hover:underline">查看</a>--%>
<%--                            </td>--%>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- 页脚 -->
<%--<footer class="bg-white border-t border-gray-200 py-4 mt-auto">--%>
<%--    <div class="container mx-auto px-4">--%>
<%--        <div class="flex flex-col md:flex-row justify-between items-center">--%>
<%--            <p class="text-gray-500 text-sm">© 2023 学生信息管理系统. 保留所有权利.</p>--%>
<%--            <div class="flex space-x-4 mt-4 md:mt-0">--%>
<%--                <a href="#" class="text-gray-500 hover:text-primary transition-colors">--%>
<%--                    <i class="fa fa-question-circle"></i> 帮助中心--%>
<%--                </a>--%>
<%--                <a href="#" class="text-gray-500 hover:text-primary transition-colors">--%>
<%--                    <i class="fa fa-file-text-o"></i> 使用文档--%>
<%--                </a>--%>
<%--                <a href="#" class="text-gray-500 hover:text-primary transition-colors">--%>
<%--                    <i class="fa fa-envelope-o"></i> 联系我们--%>
<%--                </a>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
<%--</footer>--%>

<!-- JavaScript -->
<script>
    // 设置当前日期
    document.addEventListener('DOMContentLoaded', function() {
        const now = new Date();
        const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
        document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);

        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });

        // 课程选修情况图表
        const ctx = document.getElementById('courseChart').getContext('2d');
        const courseChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['数据结构', '计算机网络', '操作系统', '编程语言', '人工智能', '数据库'],
                datasets: [{
                    label: '选修人数',
                    data: [230, 180, 150, 200, 120, 170],
                    backgroundColor: [
                        'rgba(22, 93, 255, 0.7)',
                        'rgba(22, 93, 255, 0.6)',
                        'rgba(22, 93, 255, 0.5)',
                        'rgba(22, 93, 255, 0.4)',
                        'rgba(22, 93, 255, 0.3)',
                        'rgba(22, 93, 255, 0.2)'
                    ],
                    borderColor: [
                        'rgba(22, 93, 255, 1)',
                        'rgba(22, 93, 255, 1)',
                        'rgba(22, 93, 255, 1)',
                        'rgba(22, 93, 255, 1)',
                        'rgba(22, 93, 255, 1)',
                        'rgba(22, 93, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        // 为导航链接添加点击事件，模拟页面跳转
        document.querySelectorAll('aside a').forEach(link => {
            link.addEventListener('click', function(e) {
                // 阻止默认跳转行为
                if (!this.href.endsWith('.jsp')) {
                    e.preventDefault();
                }

                // 更新活跃状态
                document.querySelectorAll('aside a').forEach(el => {
                    el.classList.remove('sidebar-item-active');
                });
                this.classList.add('sidebar-item-active');

                // 移动端点击后收起侧边栏
                if (window.innerWidth < 1024) {
                    document.getElementById('sidebar').classList.add('-translate-x-full');
                }
            });
        });
    });
</script>
</body>
</html>